  <template>
  <div class="father">
    <div class="container">
      <div class="box">
        <div class="switch">
          <div class="disabled">
            <el-button @click="groups_volume"   >音量管理</el-button>
            <el-button @click="MoreOperations">设备管理</el-button>
            <div class="volume" v-show="show">
              <el-slider v-model="value" vertical height="100px" @change="groupChange(value)"></el-slider>
            </div>
          </div>
          <el-button size="small" @click="audioPlay">系统悬浮窗</el-button>
        </div>
      </div>
      <el-dialog class="Popup" title="操作" :visible.sync="dialogVisible">
        <div class="search">
          <input type="text" v-model="search_input" placeholder="请输入搜索名称" />
          <el-button type="success" @click="search">搜索</el-button>
        </div>
        <!-- 操作看列表 -->
        <div class="loopBox" v-for="(item,index) in IntercomInfo.data" :key="index">
          <div class="loop">
            <div class="title">
              <span>{{item.name}}</span>
            </div>
            <div class="electric">
              <div class="states">
                <ul class="three">
                  <li v-for="(item1,index) in item.imcDevs" :key="index">
                    <span
                      :title="item1.name"
                    >{{item1.name.length>10?item1.name.substr(0,5)+"...":item1.name}}</span>
                    <div class="rigth">
                      <div >
                        <el-slider  v-model="item1.volume" :disabled="item1.isOnline== '离线'"  @change="change(item1)"></el-slider>
                      </div>
                      <label v-if="item1.isOnline== '离线' ">{{item1.isOnline}}</label>
                      <label style="color:#09daba" v-else>{{item1.isOnline}}</label>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="pagesKG">
          <el-pagination
            small
            :current-page="pages"
            layout="prev, pager, next"
            :total=" IntercomInfo.total"
            :page-size="2"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  <script>
import ht from "../../ht.js";
import { mapActions } from "vuex";
import { mapState } from "vuex";
import { mapMutations } from "vuex";
// import { mapGetters } from "vuex";
export default {
  data() {
    return {
      ElectricalScience: false,
      dialogVisible: false,
      // 进线参数
      // icon:'el-icon-arrow-left',
      ts: false,
      search_input: "",
      pages: 1,
      electric: {},
      path: " ",
      value: 60,
      show: false
    };
  },

  computed: {
    ...mapState("intercom", ["IntercomInfo",'groupId'])
  },
  methods: {
    groups_volume() {
      this.show = !this.show;
    },
    setpage() {
      this.pages = 1;
    },
    change(item, e) {
      var obj = {
        targetIds: [item.id],
        bcOutput: item.volume
      };
      this.setUp(obj)
    },

    groupChange(item){
      if(!this.groupId){
        this.$message.error('请选择组')
        return
      } 
      if(this.IntercomInfo.data.length==0) {
        this.$message.error('当前分组没有设备')
        return
      }
      var obj = {
        groupId:this.groupId,
        bcOutput:  item
      };
        this.setUp(obj)
    },
    setUp(item) {
       this.$http.post(
        "/api/threesuns/imcControl/ipCasts/volumeCtrl",
        item
      ).then(res => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
          }
        }).catch(err=>{
            this.$message.error('设置失败');
        })
    },

    // 搜索
    search() {
      this.pages = 1;
      // this.IntercomSearch()
    },
    handleCurrentChange(e) {
      this.pages = e;
    },
    MoreOperations() {
      this.dialogVisible = true;
    },
    //  系统悬浮窗
      audioPlay() {
      this.$emit("playStatus");
    },
  }
};
</script>
  <style scoped>
* {
  box-sizing: border-box;
}
.icon-tushi {
  font-size: 20px;
}
.icon-danti {
  font-size: 18px;
}
.icon-tonggao {
  font-size: 20px;
}
.box {
  bottom: 70px;
  z-index: 2;
}
.item {
  margin-top: 8px;
  margin-left: 40px;
}
.left {
  width: 330px;
  height: 50px;
  float: left;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #ffffff;
}
.left .el-button--small {
  padding: 6px 6px;
  border-radius: 50%;
  z-index: 2;
}
.switch {
  width: fit-content;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #fff;
  text-align: center;
  margin: 0 auto;
  padding: 10px 40px 5px 40px;
}
.Illustrations {
  position: absolute;
  background-color: #fff;
  width: 180px;
  z-index: 2;
  bottom: 200px;
  left: 600px;
}
.Illustrations p {
  line-height: 30px;
  text-align: center;
  color: #fff;
  position: relative;
}
.Illustrations .el-icon-close {
  position: absolute;
  line-height: 30px;
  color: #fff;
  right: 10px;
}
.top {
  height: 30px;
  background-color: RGB(0, 66, 143);
}

.switch .el-radio {
  line-height: 50px;
  color: #0a7e7e;
}
/deep/ .switch .el-radio__input.is-checked + .el-radio__label {
  color: #0ac07e;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background: #0ac07e;
}
/deep/ .el-dialog {
  /* width: 550px; */
  width: fit-content;
}
/deep/ .el-dialog__body {
  overflow: hidden;
}
.switch .el-button {
  /* margin-left: 40px; */
  font-size: 12px;
  padding: 8px 16px;
  color: #fff;
  border-radius: 8px;
  background-color: RGBA(9, 218, 186, 230);
  margin-bottom: 5px;
}
/deep/ .switch .el-radio__inner {
  background-color: #0a7e7e;
}
/deep/ .rigth .el-radio__inner {
  background-color: #0a7e7e;
}
/deep/ .rigth .el-radio__label {
}
.container /deep/ .el-dialog__header {
  background-color: #0a7e7e;
}
.container /deep/ .el-dialog__title {
  color: #fff;
}

/deep/ .el-switch__label {
  color: #0a7e7e;
}
/deep/ .left .el-button {
  background-color: #0a7e7e;
}
.Popup {
  /* overflow: hidden; */
}
.loopBox {
  width: fit-content;
  padding: 0 5px;
}
.detailsBox {
  display: inline-block;
}
.loop {
  border: #0d111a 1px solid;
  margin-top: 10px;
}
.title {
  border-bottom: #0d111a 1px solid;
  height: 29px;
  color: #0d111a;
  line-height: 29px;
  padding-left: 20px;
  padding-right: 20px;
}
.title .el-switch {
  float: right;
  margin-top: 5px;
}
.electric {
  /* height: 228px; */
  /* overflow: hidden; */
  padding-top: 18px;
}
.states::-webkit-scrollbar {
  width: 3px;
  background-color: #0a7e7e;
}
.states::-webkit-scrollbar-track {
  background-color: #d6e2ed;
}
.states::-webkit-scrollbar-thumb {
  background: #0a7e7e;
}
.marking {
  float: left;
}
.states {
  /* width: 332px; */
  margin: auto;
  height: 220px;
  padding-top: 20px;
  /* padding-top: 6px 7px; */
  overflow: hidden;
  overflow-y: scroll;
}
.states ul {
  float: left;
  padding: 0 10px;
}
.states li span {
  display: inline-block;
  width: 133px;
  padding: 3px 10px;
  line-height: 33px;
  margin-left: 15px;
  border-radius: 8px;
  text-align: center;
  /* line-height: 28px; */
  color: #333;
  position: relative;
}
.individual {
  text-align: center;
  height: 34px;
  border-bottom: 1px #cccccc solid;
  line-height: 34px;
}
.individual i {
  width: 34px;
  text-align: center;
  margin-right: 5px;
}
.individual span {
  border-left: 1px #cccccc solid;
  text-align: center;
  display: inline-block;
  width: 143px;
  color: RGB(116, 116, 116);
  font-size: 12px;
}

.states span :hover span {
  color: #39ca64;
}
.states span i {
  width: 10px;
  position: absolute;
  border-top: 1px #3ccb66 solid;
  top: 13px;
  right: -11px;
}
.rigth {
  float: right;
  width: fit-content;
  /* height: 28px; */
  border-radius: 8px;
  line-height: 25px;
  text-align: center;
  padding: 0 18px;
}

.three li {
  margin-bottom: 10px;
  display: flex;
  border-radius: 12px;
  box-shadow: inset 0px 0px 5px 1px #e8e7e7;
}

.container .el-radio {
  margin-left: 5px;
  color: #0a7e7e;
}

.details {
  width: 678px;
  height: 259px;
  border: #004492 1px solid;
  overflow: hidden;
}
table {
  margin: auto;
}
.table {
  overflow-y: scroll;
  margin-top: 10px;
}
.table::-webkit-scrollbar {
  width: 3px;
  background-color: #0a7e7e;
}
.table::-webkit-scrollbar-track {
  background-color: #d6e2ed;
}
.table::-webkit-scrollbar-thumb {
  background: #004492;
}
.distinguish {
  border-bottom: 1px dashed #7f7f7f;
}
/deep/ .el-table__row /deep/ .expanded {
  border: 1px solid red;
}
/deep/ .el-table__row {
  color: #004492;
  border: 1px solid red;
}
.tips {
  float: left;
  overflow: hidden;
  width: 376px;
  height: 50px;
  border: #004492 1px solid;
  margin-top: 15px;
  margin-left: 4px;
}
.tips li {
  float: left;
  margin-left: 36px;
  line-height: 50px;
}
.tips :nth-child(1) span {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #39ca66;
  margin-right: 10px;
  vertical-align: middle;
}
.tips :nth-child(2) span {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #fe5958;
  margin-right: 10px;
  vertical-align: middle;
}
.tips :nth-child(3) span {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ffcb58;
  margin-right: 10px;
  vertical-align: middle;
}
.tips :nth-child(4) span {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #808080;
  margin-right: 10px;
  vertical-align: middle;
}

.Choice {
  margin-top: 15px;
  width: 678px;
  height: 50px;
  border: #39ca66 1px solid;
  margin-left: 400px;
  overflow: hidden;
  line-height: 50px;
}
.Choice .el-radio {
  margin-left: 115px;
}
.pagesKG {
  margin-top: 10px;
  text-align: center;
}
.pagesDJ {
  float: left;
  margin-top: 15px;
  width: 348px;
  height: 30px;
  margin-left: 200px;
  overflow: hidden;
  padding-top: 8px;
}
thead th,
tr {
  width: 110px;
  height: 30px;
}
table {
  border-collapse: collapse;
  text-align: center;
}
.Demarcation {
  border-top: 2px solid #606266;
}
.color {
  color: #ffcb58;
}
.red {
  color: red;
}
.Contai_details {
  color: #333;
  margin-left: 9px;
}
.three :hover .Contai_details {
  cursor: pointer;
}
.rigth:hover {
  cursor: pointer;
}
.disabled {
  display: inline-block;
  margin-right: 10px;
}
.search {
  padding-left: 5px;
}
.search input {
  width: 260px;
  height: 30px;
  outline: none;
  padding-left: 10px;
}
.search .el-button {
  padding: 8px 6px;
  margin-left: 10px;
}
.rigth .el-button {
  padding: 2px 10px;
}
.rigth > div {
  display: inline-block;
  /* margin-right: 10px; */
  vertical-align: middle;
}
.rigth .el-slider {
  width: 100px;
}
.Full {
  float: right;
}
.Full .el-button {
  padding: 3px;
}
.mg {
  margin-left: 10px;
}
.el-slider {
  /* display: inline-block; */
}

.volume {
  background-color: #04141a;
  padding: 5px 3px;
  position: absolute;
  top: -110px;
  margin-left: 18px;
}
/deep/ .el-slider.is-vertical .el-slider__bar,
/deep/ .el-slider.is-vertical .el-slider__runway {
  width: 3px;
}
/deep/ .el-slider__button {
  width: 2;
  height: 2;
  border: 2px solid rgb(9, 218, 186);
  margin-right: 2px;
}
/deep/ .hover {
  /* display: none; */
  border-radius: 50%;
}
/deep/ .el-slider__bar {
  background: rgb(9, 218, 186);
}
.rigth /deep/ .el-slider__button {
  width: 0;
  height: 0;
  border: none;
}
.rigth /deep/ .el-slider__button-wrapper {
  width: 15px;
  height: 15px;
  top: -5px;
}
</style>
